<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/manager.css">
</head>

<body>
    <header></header>
    <!-- 左侧导航栏 -->
    <div class="nav">
        <div class="add_arti_btn">Markdown编辑器</div>
        <div class="tab artical">文章管理</div>
        <div class="tab classified_column">分类专栏</div>
        <!-- 用户信息 -->
        <div class="user">
            <div class="userinfo">
                <p>用户 <span class="username">管理员</span> <a href="./login.html" class="logout">注销</a></p>
            </div>
            <div class="tab user_opt">
                <button class="changePs_btn">修改密码</a>
            </div>
        </div>
    </div>

    <div class="content">
        <!-- 文章管理部分 -->
        <div class="artical_content">
            <h3>文章管理</h3>
            <span class="refreshArti_btn"></span>
            <div class="artical_list">
                <ul>
                    <li data-id="5">
                        <div class="arti_title">
                            <a href="javascript:;" class="arti_title_span">[力扣刷题笔记] 989. 数组形式的整数加法</a>
                            <a href="javascript:;" class="arti_class_info" data-id="44">数据结构</a>
                        </div>
                        <div class="arti_info">
                            <span class="time">2021年2月28日 11:16:17</span>
                            <div class="opt_box">
                                <a href="javascript:;" class="edit_opt_box">编辑</a>
                                <a href="javascript:;" class="check_opt_box">浏览</a>
                                <a href="javascript:;" class="delete_opt_box">删除</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>

        <!-- 分类管理部分 -->
        <div class="classified_column_content">
            <h3>分类专栏</h3>
            <span class="refreshCol_btn"></span>
            <button class="add_column">新建</button>
            <!-- 分类列表 -->
            <div class="column_list">
                <ul>
                    <!-- col格式 -->
                    <!-- <li data-id="1">
                        <span class="col_name">java</span>
                        <div class="opt_box">
                            <a href="javascript:;" class="manage_opt_box">管理</a>
                            <a href="javascript:;" class="edit_opt_box">编辑</a>
                            <a href="javascript:;" class="delete_opt_box">删除</a>
                        </div>
                        <span class="artical_count">4 篇文章</span>
                    </li> -->
                </ul>
            </div>
            <!-- 分类下文章列表 -->
            <div class="artiInColumn">
                <ul>
                    <!-- arti_in_col格式 -->
                    <li data-id="5">
                        <div class="arti_title">
                            <span class="arti_title_span">[力扣刷题笔记] 989. 数组形式的整数加法</span>
                        </div>
                        <div class="arti_info">
                            <div class="opt_box">
                                <a href="javascript:;" class="edit_opt_box">编辑</a>
                                <a href="javascript:;" class="check_opt_box">浏览</a>
                                <a href="javascript:;" class="delete_opt_box">删除</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 模态框部分 开始 -->
    <!-- 修改密码框 -->
    <div class="modal_box changePs_bar">
        <h2>修改密码</h2>
        <span class="close_bar_btn"></span>
        <input type="password" class="oldPs_in" placeholder="输入旧密码">
        <input type="password" class="changePs_in" placeholder="输入新密码">
        <!-- <input type="password" class="confirmPs_in" placeholder="确认新密码"> -->
        <button class="confirm_btn changePs_comfirm_btn">确认</button>
    </div>
    <!-- 新建文章提示框 -->
    <div class="modal_box add_arti_bar">
        <h2>新建文章</h2>
        <span class="close_bar_btn"></span>
        <input type="text" class="arti_title_in" placeholder="文章标题">
        <select class="arti_class_in">
            <option value="">待分类</option>
            <!-- 这里不选择的value如何填写？ -->
        </select>
        <textarea class="arti_Content_in" placeholder="文章内容"></textarea>
        <button class="confirm_btn add_arti_bar_btn">新增</button>
    </div>
    <!-- 编辑文章提示框 -->
    <div class="modal_box edit_arti_bar">
        <h2>编辑文章</h2>
        <span class="close_bar_btn"></span>
        <input type="text" class="arti_newTitle_in" placeholder="文章标题">
        <select class="arti_newClass_in">
            <option value="">待分类</option>
            <!-- 这里待分类的value如何填写？ -->
        </select>
        <!-- <input type="text" class="arti_newContent_in" placeholder="文章内容"> -->
        <textarea class="arti_newContent_in" placeholder="文章内容"></textarea>
        <button class="confirm_btn edit_arti_bar_btn">确认</button>
    </div>
    <!-- 删除文章确认框 -->
    <div class="modal_box delete_arti_bar" data-type="article">
        <h2>是否确定要删除当前文章？</h2>
        <span class="close_bar_btn"></span>
        <button class="cancel_btn artiDel_cancelBtn">取消</button>
        <button class="confirm_btn artiDel_confrimBtn">确认</button>
    </div>
    <!-- 新建专栏提示框 -->
    <div class="modal_box add_col_bar">
        <h2>新建分类专栏</h2>
        <span class="close_bar_btn"></span>
        <input type="text" class="col_title_in" placeholder="新的分类专栏名称">
        <button class="confirm_btn add_col_bar_btn">新增</button>
    </div>
    <!-- 编辑专栏提示框 -->
    <div class="modal_box edit_col_bar">
        <h2>编辑分类专栏</h2>
        <span class="close_bar_btn"></span>
        <input type="text" class="col_newTitle_in" placeholder="修改专栏名称">
        <button class="confirm_btn edit_col_bar_btn">确认</button>
    </div>
    <!-- 删除专栏确认框 -->
    <div class="modal_box delete_col_bar" data-type="column">
        <h2>是否确定要删除当前分类专栏？</h2>
        <span class="close_bar_btn"></span>
        <button class="cancel_btn del_cancelBtn">取消</button>
        <button class="confirm_btn del_confrimBtn">确认</button>
    </div>
    <!-- 模态框部分 结束 -->
    <div class="cover"></div>
    <script src="./js/util.js"></script>
    <script src="./js/common.js"></script>
    <script src="./js/manager.js"></script>
</body>

</html>